<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>导航栏</title>
        <style>
            ul{
                list-style: none;
                margin: 0;
                padding: 0;
                overflow: hidden;
                background-color: crimson;
            }

            li{
                float: left;
                border-right: 1px solid white;
                padding: 5px;
                text-align: center;
            }

            li:last-child{
                border-right: none;
            }

            li a{
                display: block;
                color: white;
                text-align: center;
                padding: 14px 16px;
                text-decoration: none;
            }

            li a:hover{
                background-color: darkred;
            }            
        </style>
    </head>

    <body>
        <ul>
            <li><a href="#home">主页</a></li>
            <li><a href="#search">在线调查</a></li>
            <li><a href="#liuyan">我要留言</a></li>
            <li><a href="#join">注册加入</a></li>
            <li><a href="#contact">联系我们</a></li>
        </ul>
    </body>
</html>